<template>
  <div class="win10-datepanel">
    <!-- 测试ref -->
    <div @click="changeRefVal" ref="refDom">
      测试ref: {{refVal}}
    </div>
    <!-- 测试reactiveOne -->
    <div @click="reactiveOne.changeReactiveOne">
      测试reactiveOne: {{reactiveOne.reactiveOne}}
      测试reactiveOneTest: {{reactiveOne.reactiveOneTest}}
    </div>
    <!-- 测试reactiveTwo -->
    <div @click="changeReactiveTwo">
      测试reactiveTwo: {{reactiveTwoValue}}
    </div>
    <!-- 测试reactiveThree -->
    <div @click="changeReactiveThree">
      测试reactiveThree: {{reactiveThreeValue}}
      测试ToRef: {{reactiveThreeToRef}}
    </div>
    <!-- 测试computed -->
    <div>
      测试computed: {{reactiveComputed}}
    </div>
    <!-- 测试testWatchEffect -->
    <div>
      测试testWatchEffect: {{testWatchEffect}}
    </div>
    <!-- 测试tplArr -->
    <div>
      测试tplArr: {{tplArr[0].val}}
    </div>
  </div>
</template>

<script>
import { effect } from '@vue/reactivity'
import { reactive, ref, onMounted, toRefs, toRef, watchEffect, computed } from 'vue';

export default {
  name: "Count",
  props: {
    initial: Number,
    tplArr: Array
  },
  setup(props, ctx) {
    // ref
    const refVal = ref(0)
    const changeRefVal = () => { refVal.value++ }

    // refDom
    const refDom = ref(null)
    onMounted(() => { refDom.value.style.color = 'red' })

    // reactiveOne
    const reactiveOne = reactive({
      reactiveOne: 'reactiveOne',
      changeReactiveOne: () => { 
        reactiveOne.reactiveOne = 'reactiveOneone'
        reactiveOne.reactiveOneTest = '11'
      }
    })

    // reactiveTwo
    const reactiveTwo = reactive({
      reactiveTwoValue: 'reactiveTwo',
      changeReactiveTwo: () => { reactiveTwo.reactiveTwoValue +=  refVal.value},
    })

    // reactiveThree
    const reactiveThree = reactive({
      reactiveThreeValue: 'reactiveThree',
      changeReactiveThree: () => {
        reactiveThree.reactiveThreeValue = 'change'
      },
    })
    const reactiveThreeToRef = toRef(reactiveThree, 'reactiveThreeValue')

    // computed
    const reactiveComputed = computed(() => reactiveOne.reactiveOne + refVal.value)

    // watcheffect
    const testWatchEffect = ref(100)
    watchEffect(() => {
      console.log('watchEffect')
      testWatchEffect.value += refVal.value
    })

    return {
      refVal,
      changeRefVal,
      reactiveOne,
      ...toRefs(reactiveTwo),
      ...reactiveThree,
      reactiveThreeToRef,
      reactiveComputed,
      testWatchEffect,
      refDom
    }
  }
};
</script>

<style lang="scss" scoped>
.win10-datepanel {
  height: 100vh;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  font-size: 30px;
  margin-bottom: 20px;
  .panel-box {
    display: flex;
    margin-top: 10em;
    justify-content: center;
  }
  // align-items: center

  * {
    box-sizing: border-box;
  }
}
</style>
